<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      media="screen and (max-width:576px)"
      href="css/index.css"
    />
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <link rel="stylesheet" href="./swiper/swiper.min.css" />
  </head>
  <body>
    <div class="searchBox">
      <span class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" class="text" placeholder="请输入..." />
      </span>
    </div>
    <div class="swiper-container" id="course1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./img/1.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/2.jpg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="./img/3.jpg" alt="" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="message">
      <div class="data">
        <i class="iconfont icon-laba"></i>
        <div class="swiper-container" id="course">
          <div class="swiper-wrapper">
            <div class="swiper-slide">注册会员的条件</div>
            <div class="swiper-slide">售前售后注意事项</div>
          </div>
        </div>
        <i class="arrow"></i>
      </div>
    </div>
    <div class="title">
      <h2>今日热销</h2>
      <div class="meal">
        <div class="swiper-container" id="course2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" id="m1">
              <div class="item">
                <div class="img">
                  <img src="./img/feili2.png" alt="" />
                </div>
                <p class="name">菲力牛排</p>
                <div class="price clearfix">
                  <span class="money">￥27</span>
                  <i class="iconfont icon-add_circle add"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide" id="m1">
              <div class="item">
                <div class="img">
                  <img src="./img/heijiao.jpg" alt="" />
                </div>
                <p class="name">菲力牛排</p>
                <div class="price clearfix">
                  <span class="money">￥27</span>
                  <i class="iconfont icon-add_circle add"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide" id="m1">
              <div class="item">
                <div class="img">
                  <img src="./img/meiman2.jpg" alt="" />
                </div>
                <p class="name">菲力牛排</p>
                <div class="price clearfix">
                  <span class="money">￥47</span>
                  <i class="iconfont icon-add_circle add"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide" id="m1">
              <div class="item">
                <div class="img">
                  <img src="./img/nengliang2.jpg" alt="" />
                </div>
                <p class="name">菲力牛排</p>
                <div class="price clearfix">
                  <span class="money">￥37</span>
                  <i class="iconfont icon-add_circle add"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide" id="m1">
              <div class="item">
                <div class="img">
                  <img src="./img/feili2.png" alt="" />
                </div>
                <p class="name">菲力牛排</p>
                <div class="price clearfix">
                  <span class="money">￥27</span>
                  <i class="iconfont icon-add_circle add"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <h2>精选推荐</h2>
      <div class="flex">
        <div class="item">
          <div class="img">
            <img src="./img/feili2.png" alt="" />
          </div>
          <p class="name">菲力牛排</p>
          <div class="price clearfix">
            <span class="money">￥27</span>
            <i class="iconfont icon-add_circle add"></i>
          </div>
        </div>
        <div class="item">
            <div class="img">
              <img src="./img/meiman2.jpg" alt="" />
            </div>
            <p class="name">菲力牛排</p>
            <div class="price clearfix">
              <span class="money">￥27</span>
              <i class="iconfont icon-add_circle add"></i>
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="./img/nengliang2.jpg" alt="" />
            </div>
            <p class="name">菲力牛排</p>
            <div class="price clearfix">
              <span class="money">￥27</span>
              <i class="iconfont icon-add_circle add"></i>
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="./img/niuzaipa.jpg" alt="" />
            </div>
            <p class="name">菲力牛排</p>
            <div class="price clearfix">
              <span class="money">￥27</span>
              <i class="iconfont icon-add_circle add"></i>
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="./img/rouyan.jpg" alt="" />
            </div>
            <p class="name">菲力牛排</p>
            <div class="price clearfix">
              <span class="money">￥27</span>
              <i class="iconfont icon-add_circle add"></i>
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="./img/shalang.jpg" alt="" />
            </div>
            <p class="name">菲力牛排</p>
            <div class="price clearfix">
              <span class="money">￥27</span>
              <i class="iconfont icon-add_circle add"></i>
            </div>
          </div>
      </div>
    </div>
    <div class="footer">
        <div class="home active">
            <i class="iconfont icon-shouye"></i>
            <p class="Home">首页</p>
        </div>
        <div class="home ">
            <i class="iconfont icon-fenlei"></i>
            <p class="Home">分类</p>
        </div>
        <div class="home ">
            <i class="iconfont icon-gouwuche"></i>
            <p class="Home">购物车</p>
        </div>
        <div class="home ">
            <i class="iconfont icon-wode"></i>
            <p class="Home">我的</p>
        </div>
    </div>
    <script src="./swiper/swiper.min.js"></script>
    <script src="./jquery.js"></script>
    <script>
      var swiper = new Swiper("#course1", {
        autoplay: true,
        loop:true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
      var swiper1 = new Swiper("#course", {
        autoplay: true,
        direction: "vertical",
      });
      var swiper2 = new Swiper("#course2", {
        slidesPerView: 2,
        spaceBetween: 30,
        freeMode: true,
      });
      $('.home').click(function(){
          $(this).addClass('active')
          $('.home').not($(this)).removeClass('active');
      })
    </script>
  </body>
</html>
